<template>
  <el-dialog v-model="dialogVisible" title="矿山详细概况" width="900" append-to-body>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="mineChart"></div>
      </el-col>
      <el-col :span="12">
        <div id="reseveChart"></div>
      </el-col>
      <el-col :span="24">
        <div class="mine-div">
          <div v-for="(item,index) in mineList" :key="index" class="mine">
            <div class="sign" v-if="item.pitType == 1 || item.pitType == 2">
              <div class="sign-text">{{ item.pitType==1?'省级':'国家级' }}</div>
              <div class="rectangle"></div>
              <div class="triangle"></div>
            </div>
            <div class="mine-img">
              <el-image v-if="item.url" style="width:100%; height:100%" :src="item.url" :fit="fit" />
              <el-empty v-else description="暂无图片" :image-size="35" />
            </div>
            <div class="mine-name" :title="item.openPitName">{{ item.openPitName }}</div>
            <div class="mine-device">
              <div class="device">
                <div><img style="width: 12px;height: 12px;margin-top: 5px;" src="/images/device/overview1.png"></div>
                <div>环境监测</div>
                <div>{{ item.dustCount+' 台'}}</div>
              </div>
              <div class="device">
                <div><img style="width: 12px;height: 12px;margin-top: 5px;" src="/images/device/overview2.png"></div>
                <div>GNSS设备</div>
                <div>{{ item.gnssCount+' 台'}}</div>
              </div>
              <div class="device">
                <div><img style="width: 12px;height: 12px;margin-top: 5px;" src="/images/device/overview3.png"></div>
                <div>视频监控</div>
                <div>{{ item.videoCount+' 台'}}</div>
              </div>
            </div>
            <div class="mine-reserves">
              <div>
                <div class="reserves-Number" style="color: #E3DFDF;">{{ item.totalReserves }}<span class="reserves-unit">万吨</span></div>
                <div class="reserves-text">总储量</div>
                <img style="width: 100%;" src="/images/device/monitor_center.png">
              </div>
              <div>
                <div class="reserves-Number" style="color: #04c47d;">{{ item.remainReserves }}<span class="reserves-unit">万吨</span></div>
                <div class="reserves-text">剩余储量</div>
                <img style="width: 100%;" src="/images/device/monitor_center.png">
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup>
import * as echarts from 'echarts';
import { nextTick } from 'vue';
import { getGreenMineInfo, getMineInfoList, getMineReservesInfo } from "@/api/situation";
const dialogVisible = ref(false);
let mineChart
let reseveChart
let option = {
  tooltip: {
    trigger: 'item'
  },
  color: ['#04c47d', '#67c23a', '#e6a23c'], // 定义颜色数组
  legend: {
    orient: 'vertical',
    top: 'middle',
    right: '10px',
    align: 'left',
    textStyle: { //图例文字的样式
      color: '#eef1fa',
      fontSize: 14
    },
  },
  series: [
    {
      name: '矿山种类',
      type: 'pie',
      radius: '70%',
      center: ['35%', '55%'],
      labelLine: {
        show: true
      },
      label: {
        normal: {
          show: true,
          position: 'outside',
          fontSize: 14,
          color: '#eef1fa',
        },
      },
      data: [
        { value: 2, name: '国家级绿色矿山' },
        { value: 7, name: '省级绿色矿山' },
        { value: 30, name: '非绿色矿山' }
      ],
    }
  ]
};
let reserveOption = {
  grid: {
    left: '5px',    // 左边距为0
    right: '5px',   // 右边距为0
    top: '30px',     // 上边距为0
    bottom: '0px',  // 下边距为0
    containLabel: true // 确保标签不会被遮挡
  },
  xAxis: {
    type: 'category',
    data: ['金矿石', '银矿石', '铁矿石', '铜矿石', '白云石', '石灰石', '方解石','砂石'],
    axisLabel: {
      margin: 10,
      fontSize: 12,
      width: 60,
      color: "#eef1fa",
      interval: 0,
      overflow: "breakAll",
    },
    axisLine: {
      lineStyle: {
        color: "rgba(82, 149, 100, 1)",
      },
    },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    name: '单位：万吨',
    nameTextStyle: {
      fontSize: 12,
      color: "#eef1fa",
    },
    axisLabel: {
      fontSize: 12,
      color: "#eef1fa",
    },
    splitLine: {
      lineStyle: {
        color: "rgba(82, 149, 100, 0.7)",
        type: "dashed",
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(82, 149, 100, 1)",
      },
    },
  },
  series: [
    {
      data: [6.1, 4.2, 120, 200, 150, 80, 70, 130],
      type: 'bar',
      showBackground: true,
      label: {
        show: true,
        color: '#fff',
        position: 'top',
        fontSize: 10
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#04c47d' },
          { offset: 1, color: '#04c47d' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#04c47d' },
            { offset: 0.7, color: '#04c47d' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      }
    }
  ]
}
const mineList = ref([
  {mineId:'1', mineName:'安徽青阳宝宏矿业有限公司', isGreen: true, url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', deviceList:[{name:'环境监测',total:5},{name:'gnss',total:5},{name:'视频监控',total:5}], totalReserves: 100, reserves: 50},
  {mineId:'1', mineName:'安徽青阳宝宏矿业有限公司', isGreen: true, url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', deviceList:[{name:'环境监测',total:5},{name:'gnss',total:5},{name:'视频监控',total:5}], totalReserves: 100, reserves: 50},
  {mineId:'1', mineName:'安徽青阳宝宏矿业有限公司', isGreen: false, url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', deviceList:[{name:'环境监测',total:5},{name:'gnss',total:5},{name:'视频监控',total:5}], totalReserves: 100, reserves: 50},
  {mineId:'1', mineName:'安徽青阳宝宏矿业有限公司', isGreen: false, url:'', deviceList:[{name:'环境监测',total:5},{name:'gnss',total:5},{name:'视频监控',total:5}], totalReserves: 100, reserves: 50},
  {mineId:'1', mineName:'安徽青阳宝宏矿业有限公司', isGreen: false, url:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', deviceList:[{name:'环境监测',total:5},{name:'gnss',total:5},{name:'视频监控',total:5}], totalReserves: 100, reserves: 50},
  {mineId:'1', mineName:'安徽青阳宝宏矿业有限公司', isGreen: false, url:'', deviceList:[{name:'环境监测',total:5},{name:'gnss',total:5},{name:'视频监控',total:5}], totalReserves: 100, reserves: 50},
])
const show = () => {
  dialogVisible.value = true;
  greenMineInfo();
  mineReservesInfo();
  mineInfoList();
};

// 获取绿色矿山
function greenMineInfo() {
  getGreenMineInfo().then(res=>{
    if (res.code == 200) {
      let dataList = []
      res.data.forEach(item=>{
        if (item.pitType == 0) {
          dataList.push({value:item.count, name:'普通矿山'})
        } else if (item.pitType == 1) {
          dataList.push({value:item.count, name:'省级绿色矿山'})
        } else {
          dataList.push({value:item.count, name:'国家级绿色矿山'})
        }
      })
      option.series[0].data = dataList
      nextTick(()=>{
        mineChart = echarts.init(document.getElementById("mineChart"), null, {locale: 'ZH'});
        mineChart.setOption(option, true)
      })
    }
  })
}
// 获取矿山储量数据
function mineReservesInfo() {
  getMineReservesInfo().then(res=>{
    if (res.code == 200) {
      let xdata = []
      let dataList = []
      res.data.forEach(item=>{
        xdata.push(item.mineralName)
        dataList.push(item.remainReserves)
      })
      reserveOption.xAxis.data = xdata
      reserveOption.series[0].data = dataList
      nextTick(()=>{
        reseveChart = echarts.init(document.getElementById("reseveChart"), null, {locale: 'ZH'});
        reseveChart.setOption(reserveOption, true)
      })
    }
  })
}
//
function mineInfoList() {
  getMineInfoList().then(res=>{
    if (res.code == 200) {
      mineList.value = res.data
      nextTick(()=>{
        const scrollContainer = document.querySelector('.mine-div');
        scrollContainer.addEventListener('wheel', (event) => {
          // 阻止默认的垂直滚动行为
          event.preventDefault();
          // 计算水平滚动的距离
          const scrollAmount = event.deltaY; // deltaY 表示垂直滚动的距离
          // 调整水平滚动位置
          scrollContainer.scrollLeft += scrollAmount*3;
        });
      })
    }
  })
}

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
#mineChart {
  width: 100%;
  height: 230px;
}
#reseveChart {
  width: 100%;
  height: 230px;
}
.mine-div {
  margin-top: 10px;
  display: flex;
  scroll-behavior: smooth;
  width: 100%;
  height: 330px;
  overflow-x: auto;
  overflow-y: hidden;
  .mine {
    flex: 0 0 auto;
    width: 220px;
    height: 99%;
    border: 1px solid rgba(82, 149, 100, 0.7);
    margin: 0px 5px;
    border-radius: 4px;
    position: relative;
    .sign {
      position: absolute;
      width: 100%;
      height: 20px;
      top: 0px;
      left: 0px;
      z-index: 98;
      .sign-text {
        position: absolute;
        z-index: 99;
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-family: PangMen;
        font-size: 18px;
        text-align: center;
        color: #eef1fa;
      }
      .rectangle {
        width: 100%;
        height: 20px;
        background-color: #04c47d;
      }
      .triangle {
        width: 0;
        height: 0;
        border-left: 110px solid transparent;
        border-right: 110px solid transparent;
        border-bottom: 20px solid #04c47d; /* 调整颜色和高度 */
        transform: rotate(180deg); /* 旋转180度使其倒置 */
      }
    }
    .mine-img {
      height: 130px;
      width: 100%;
    }
    .mine-name {
      width: 100%;
      text-align: center;
      font-family: PangMen;
      font-size: 16px;
      margin: 5px 2px;
      color: #eef1fa;
      white-space: nowrap;  
      overflow: hidden;  
      text-overflow: ellipsis;  
    }
    .mine-device {
      .device {
        display: flex;
        align-items: center;
        padding: 0px 10px;
        box-sizing: border-box;
        >div:nth-child(1) {
          margin-right: 5px;
        }
        >div:nth-child(2) {
          font-family: PangMen;
          font-size: 16px;
          width: 100px;
          color: #04c47d;
        }
        >div:nth-child(3) {
          font-family: PangMen;
          font-size: 16px;
          width: 100px;
          text-align: right;
          color: orange;
        }
      }
    }
    .mine-reserves {
      display: flex;
      align-items: center;
      >div {
        width: 49%;
        height: 90px;
        position: relative;
        .reserves-Number {
          position: absolute;
          width: 100%;
          left: 0px;
          bottom: 55px;
          font-family: PangMen;
          font-size: 14px;
          text-align: center;
          .reserves-unit {
            font-size: 8px;
          }
        }
        .reserves-text {
          position: absolute;
          width: 100%;
          left: 0px;
          bottom: 30px;
          font-family: PangMen;
          font-size: 16px;
          text-align: center;
          color: #409eff;
          letter-spacing: 1px;
        }
        >img {
          position: absolute;
          left: 0;
          bottom: 5px;
        }
      }
    }
  }
}
</style>
<style>
.el-empty__description {
  margin-top: 5px;
}
</style>
